<template>
	<view>

		<view class="cinema-top">
			<view class="tops-item">
				<view class="cinema-img">
					<!-- <image :src="baseurl+info.cover"></image> -->
					<image :src="info.cover" mode="" />
				</view>
				<view class="cinema-info">
					<view class="cinema-info-top">
						<view class="top-name">{{info.name}}</view>

					</view>
					<view class="rate-item">
						<uni-rate :value="info.score" readonly="true" inactive-color="##ffffff"
							active-color="#FF6E06" />

						<text class="rate-nun">{{info.score}}分</text>
					</view>
					<view class="list-type">{{info.language}} | {{info.duration}}分钟</view>
					<view class="list-type">{{info.playDate}} 上映</view>
					<view class="list-type"><text>{{info.likeNum}}</text>人想看</view>
				</view>
			</view>
		</view>

		<view class="cinema-down">
			<view>影院</view>
		</view>



		<!-- <view class="cinema-list" v-for="item in cinemalist" :key="item.id" @click="gotomoviesessions(info.id)"> -->

		<view class="cinema-list" v-for="item in cinemalist" :key="item.id" @click="gotomoviesessions(info.id,item.id)">

			<view class="cinema-name">{{item.name}}</view>
			<view class="cinema-address-item">
				<view class="address-text">{{item.city}}{{item.area}}{{item.address}}</view>
				<view class="distance">{{item.distance}}</view>


			</view>
		</view>




	</view>
</template>

<script>
	import {filmdetail,movietheatre} from "../../../api/movieService.js";
	import{baseurl} from '../../../api/request.js';

	import {moviedetails,moviecinema} from "../../../mock/movie.js";
	export default {
		data() {
			return {
				baseurl,
				cinemalist: [],
				info: {},

			}
		},

		async onLoad(option) {

			let {
				id
			} = option;
			let res = await filmdetail(id)

			console.log(res);

			// let data = res.data.data;
			// this.info = data;


			if (res.code == 200) {
				let data = res.data;
				this.info = data;
			} else {
				let data = moviedetails().rows[0];
				console.log(data);
				this.info = data;
			}

			let res1 = await movietheatre({})
			console.log(res1);

			// this.cinemalist = res1.data.rows;

			if (res1.code == 200) {
				this.cinemalist = res1.rows;
			} else {

				this.cinemalist = moviecinema().rows;
				console.log(this.cinemalist);

			}

		},

		methods: {
			gotomoviesessions(id) {
				console.log(id);
				uni.navigateTo({
					url:"/pages/movie/moviesessions/moviesessions?id="+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.cinema-top {
		background-color: #636775;
		padding: 32rpx;
		position: relative;
	}

	.tops-item {
		display: flex;
		align-items: center;
		z-index: 9999;
	}

	.btins {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		filter: blur(15px);
		-webkit-filter: blur(15px);
	}

	.cinema-img {
		width: 180rpx;
		height: 248rpx;
	}

	.cinema-img image {
		width: 180rpx;
		height: 248rpx;
		border-radius: 20rpx;
	}

	.cinema-info {
		margin-left: 30rpx;
	}

	.cinema-info-top {
		display: flex;
		align-items: center;
	}

	.top-name {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 600;
	}


	.rate-item {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.rate-nun {
		color: #FF6E06;
		font-size: 28rpx;
		font-weight: 550;
		margin-left: 16rpx;
	}



	.list-type {
		color: #FFFFFF;
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.list-type text {
		color: #FF6E06;
		font-size: 550;
		margin-right: 8rpx;
	}





	.cinema-down {
		padding: 22rpx 32rpx;
		border-bottom: 2rpx solid #DFE0E2;
	}

	.cinema-list {
		margin: 0rpx 32rpx;
		border-bottom: 2rpx solid #DFE0E2;
		padding: 32rpx 0rpx 40rpx 0rpx;
	}

	.cinema-name {
		color: #2D3039;
		font-size: 32rpx;
		font-weight: 550;
	}

	.cinema-address-item {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address-text {
		color: #636775;
		font-size: 24rpx;
		width: 78%;
	}

	.distance {
		color: #636775;
		font-size: 28rpx;
	}
</style>